<template>
	<div>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-icon mui-icon-left-nav mui-pull-left callback-his" @click="goBack()"></a>
			<router-link class="mui-icon mui-pull-right hani-app-header-right-title" :to="{name:'ForgetPwd'}">忘记密码</router-link>
			<h1 class="mui-title">在线咨询</h1>
		</header>
		<div class="mui-content">
			<div class="page-min-page">
				<div class="logo-box"></div>
				<div class="from-body padding-left-right-30 mui-input-group">
					<div class="mui-input-row">
						<input type="text" class="mui-input-clear" v-model="phone" placeholder="请输入您的手机号">
					</div>
					<div class="mui-input-row">
						<input type="password" class="mui-input-clear" v-model="password"  placeholder="请输入您的您的密码">
					</div>
					<button type="button" class="app-btn mui-btn-hani-color" data-loading-text="请稍后"v-bind:disabled="setDisable" @click="loginAction">登录</button>
					<div class="tiaokuan-box">
						<div class="check-box checkbox">
							<input type="checkbox" name="vehicle" value="yes" v-model="checked" id="first-checkbox" checked="checked">
							<label for="first-checkbox">
								阅读并接受
								<router-link to="" class="file-a">《免责声明和隐私声明》</router-link>
							</label>
						</div>
						<div class="check-box checkbox">
							<input type="checkbox" name="vehicle" value="yes" v-model="checkednext" id="last-checkbox" checked="checked">
							<label for="last-checkbox">
								本人同意本人的个人资料用作贵公司个人资料(私隐)政策中所指的服务或产品的直接促销，及/或转移至其联属公司及/或其合作伙伴用作相关直接促销。
							</label>
						</div>
					</div>
					<button type="button" class="mui-btn mui-btn-warning mui-btn-outlined">注册</button>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import {api} from '../../../gloabl/api.js'
	import {setCookie,getCookie} from '../../../gloabl/common.js'
	export default{
		data:function(){
			return{
				setDisable:true,
				phone:'',
				password:'',
				checked:true,
				checkednext:true,
			}
		},
		methods:{
			loginAction(){
				if(!this.checked){
					mui.toast('请先阅读并接受条款',3000);
					return;
				}
				mui.showLoading("正在登录..","div");//遮罩层
				let me = this;
				let query = api.loginApi('"'+me.phone+'"','"'+me.password+'"');
				me.$http.post(url.graphql,{query:query}).then((res)=>{
					mui.hideLoading();
					let data = res.data.data.userLogin;
					if(!data||data==null){
						mui.toast(res.data.errors[0].message,3000);
						return;
					}
					if(data.sid ==''|| data.sid==null){
						me.$http.post(url.graphql,{query:query}).then((result)=>{
							let user = result.data.data.userLogin;
							setCookie('user_info',JSON.stringify(user),5*60*60);
							me.UpdateUserPrivacyAuthorize(user.sid);
						})
					}else{
						setCookie('user_info',JSON.stringify(data),5*60*60);
						me.UpdateUserPrivacyAuthorize(data.sid);
					}
				}).catch(function (error) {
					mui.alert('请求超时')
				})
			},
			UpdateUserPrivacyAuthorize(sid){
				let me = this;
				let query = api.UpdateUserPrivacyAuthorize('"'+sid+'"',me.checkednext);
				me.$http.post(url.graphql,{query:query}).then((res)=>{
					setTimeout(function(){
						window.history.go(-1);
					}.bind(this),1000)
				})
			}
		},
		watch:{
			phone:function(val){
				if(String(this.phone).length>7&&String(this.password).length>7)
				{
					this.setDisable = false;
				}else {
					this.setDisable = true;
				}
			},
			password:function(val){
				if(String(this.password).length>7&&String(this.phone).length>7){
					this.setDisable = false;
				}else{
					this.setDisable = true;
				} 
			}
		}
	}
</script>
<style scoped="scoped">
	.tiaokuan-box{
		width: 100%;
		overflow: hidden;
	}
	.checkbox{
		font-size: 12px;
		color: #999999;
		text-align: left;
		margin-top: 10px;
	    width: 100%;
		position: relative;
		height: 30px;
		display: inline-block;
		padding: 7px 7px;
		cursor: pointer;
	}
	.checkbox input{
		position: absolute;
		left: 0;
		top: 0;
		width: 20px;
		height: 20px;
		opacity: 0;
		vertical-align: middle;
		margin: -4px 2px 0px 2px;
		display: block;
		border: 0;
		background: transparent;
		cursor: pointer;
		-webkit-appearance: none;
	}
	.checkbox label{
		position: absolute;
		left: 30px;
		top: 0;
		height: 20px;
		line-height: 20px;
	}
	.checkbox label:before{
		content: '';
		position: absolute;
		left: -30px;
		top: 0;
		width: 17px;
		height: 17px;
		border-radius: 2px;
		border: 1px solid #ddd;
		transition: all 0.3s ease;
		-webkit-transition: all 0.3s ease;
		-moz-transition: all 0.3s ease;
	}
	.checkbox label:after{
		content: '';
		position: absolute;
		left: -24px;
		top: 1px;
		width: 6px;
		height: 12px;
		border: 0;
		border-right: 1px solid #fff;
		border-bottom: 1px solid #fff;
		background: #fff;
		transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transition: all 0.3s ease;
		-webkit-transition: all 0.3s ease;
		-moz-transition: all 0.3s ease;
	}
	.checkbox input[type='checkbox']:checked + label:after{
		background: #f08800;
	}
	.checkbox input[type='checkbox']:checked + label:before{
		background: #f08800;
		border-color: #f08800;
	}
	.file-a{
		color: #F08800;
	}
	.hani-app-header-right-title{
		font-size: 14px;
		color: #666666;
		margin-top: 5px;
	}
	.padding-left-right-30{
		padding: 0 30px;
	}
	.mui-btn-warning{
		padding: 12px 0;
	}
</style>